<!--
 * @Author: houmin 745762351@qq.com
 * @Date: 2023-11-29 10:06:07
 * @LastEditors: houmin 745762351@qq.com
 * @LastEditTime: 2023-12-02 21:25:24
 * @FilePath: \tch-h5\src\views\order\components\Tab.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import {ref, defineEmits} from 'vue';
import {useRoute} from "vue-router";

const route = useRoute()
const props = defineProps({
  type: String,
});
const emit = defineEmits(['changeTab']);
const list = ref([
  {
    name: '全部',
  },
  {
    name: '待支付',
    id: 0,
  },
  {
    name: '待使用',
    id: 1,
  },
  {
    name: '退款',
    id: 4,
  },
]);

if (props.type === 'hotPot') {
  list.value = [
    {
      name: '全部',
    },
    {
      name: '待使用',
      id: 1,
    },
  ];
}
if (props.type === 'panda' || props.type === 'haishua') {
  list.value = [
    {
      name: '全部',
    },
    {
      name: '待支付',
      id: 0,
    },
    {
      name: '已完成',
      id: 1,
    },
    {
      name: '已取消',
      id: 2,
    },
  ];
}
if (props.type === 'mall') {
  // 0-待支付 1-待使用/待发货 2-待收货 3-已完成 4-退款单 6-订单已取消 11 订单异常
  list.value = [
    // '全部',
    // '待付款',
    // '待收货',
    // '已完成',
    // '退款售后',
    {
      name: '全部',
    },
    {
      name: '待支付',
      id: 0,
    },
    {
      name: '待收货',
      id: 1,
    },
    {
      name: '已完成',
      id: 3,
    },
    {
      name: '退款售后',
      id: 4,
    },
  ];
}
if (props.type === 'convenience') {
  list.value = [
    {
      name: '全部',
    },
    {
      name: '支出',
      id: 0,
    },
    {
      name: '退款',
      id: 1,
    },
  ];
}
// 0-待支付 1-待核销 2-已核销 3-已取消 4-退款中 5-已退款 6-已过期
if (props.type === 'activity' || props.type === 'share') {
  list.value = [
    {
      name: '全部',
    },
    {
      name: '待支付',
      id: 0,
    },
    {
      name: props.type === 'activity' ? '待参加' : '待使用',
      id: 1,
    },
    {
      name: '已完成',
      id: 2,
    },

    {
      name: '退款售后',
      id: [4, 5],
    },
  ];
}
const tabId = ref(list.value[0].id);
console.log('tabId',tabId.value)
const tabClick = (item) => {
  console.log('tabClick', item);
  if (tabId.value !== item.id) {
    tabId.value = item.id;
    emit('changeTab', item.id);
  }
};
</script>

<template>
  <ul class="tab_list">
    <li
        v-for="item in list"
        class="list"
        :class="{ list_active: tabId === item.id }"
        :key="item.id"
        @click="tabClick(item)"
    >
      {{ item.name }}
      <div class="line" v-if="tabId === item.id"></div>
    </li>
  </ul>
</template>

<style scoped lang="scss">
.tab_list {
  display: flex;
  justify-content: space-around;
  height: 5rem;

  .list {
    margin-top: 2rem;
    color: #999999;
    font-size: 1.4rem;
    margin-bottom: 0.2rem;
  }

  .list_active {
    color: #333333;
    font-weight: bold;
  }

  .line {
    height: 0.6rem;
    background: linear-gradient(90deg, #4fac91 0%, #ece3aa 83%);
    border-radius: 0.3rem;
  }
}
</style>
